<template>
    <video ref="playerRef" class="video-js vjs-default-skin"></video>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from './vue-demi/lib/index';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const props = defineProps({
    options: {
        type: Object,
        default: () => ({}),
    }
});

const playerRef = ref(null);

const player = ref(null);

watch(() => props.options, async () => {
    await nextTick();
    playerRef.value.src = props.options.sources[0].src;
}, { deep: true, immediate: true });

onMounted(() => {
    player.value = videojs(playerRef.value, props.options);
});

onUnmounted(() => {
    if (player.value) {
        player.value.dispose();
    }
})
</script>

<style>

</style>